<template>
	<div>
		<el-card>
			<template #header>
				<div class="card-header">
					<el-button type="primary" @click="outerVisible = true">添加</el-button>
				</div>
			</template>
			<el-table :data="tableData" style="width: 100%">
				<el-table-column prop="id" label="ID" width="180" />
				<el-table-column prop="shopName" label="名称" width="180" />
				<el-table-column prop="shopCover" label="封面">
					<template #default="scope">
						<el-image style="width: 100px; height: 100px" :src="scope.row['shopCover']" fit="contain" />
					</template>
				</el-table-column>
				<el-table-column prop="shopLogo" label="Logo">
					<template #default="scope">
						<el-image style="width: 100px; height: 100px" :src="scope.row['shopLogo']" fit="contain" />
					</template>
				</el-table-column>
				<el-table-column prop="phone" label="电话" />
				<el-table-column prop="status" label="状态" />
				<el-table-column prop="createTime" label="创建时间" />
				<el-table-column prop="updateTime" label="更新时间" />
				<el-table-column fixed="right" label="操作" width="120">
					<template #default>
						<el-button link type="primary" size="small">编辑</el-button>

						<el-popconfirm title="确认删除?">
							<template #reference>
								<el-button link type="danger" size="small">删除</el-button>
							</template>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
		</el-card>

		<!-- 弹框 -->
		<el-dialog v-model="outerVisible" title="添加店铺" width="800">
			<div>
				<el-form ref="formRef" style="max-width: 600px" :model="ruleForm" label-width="auto"
					class="demo-dynamic">
					<el-form-item prop="name" label="店铺名称" :rules="[
			             {
			               required: true,
			               message: '请输入店铺名称',
			               trigger: 'blur',
			             }
			           ]">
						<el-input v-model="ruleForm.name" />
					</el-form-item>
					<el-form-item label="店铺封面">
						<el-upload action="#" list-type="picture-card" :auto-upload="false" limit="1">
							<el-icon>
								<Plus />
							</el-icon>

							<template #file="{ file }">
								<div>
									<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
									<span class="el-upload-list__item-actions">
										<span class="el-upload-list__item-preview"
											@click="handlePictureCardPreview(file)">
											<el-icon><zoom-in /></el-icon>
										</span>
										
										<span v-if="!disabled" class="el-upload-list__item-delete"
											@click="handleRemove(file)">
											<el-icon>
												<Delete />
											</el-icon>
										</span>
									</span>
								</div>
							</template>
						</el-upload>
					</el-form-item>
					<el-form-item label="店铺LOGO">
						<el-upload action="#" list-type="picture-card" :auto-upload="false" limit="1">
							<el-icon>
								<Plus />
							</el-icon>

							<template #file="{ file }">
								<div>
									<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
									<span class="el-upload-list__item-actions">
										<span class="el-upload-list__item-preview"
											@click="handlePictureCardPreview(file)">
											<el-icon><zoom-in /></el-icon>
										</span>
										
										<span v-if="!disabled" class="el-upload-list__item-delete"
											@click="handleRemove(file)">
											<el-icon>
												<Delete />
											</el-icon>
										</span>
									</span>
								</div>
							</template>
						</el-upload>
					</el-form-item>


					<el-form-item prop="phone" label="电话" :rules="[
					     {
					       required: true,
					       message: '请输入店铺电话',
					       trigger: 'blur',
					     }
					   ]">
						<el-input v-model="ruleForm.phone" />
					</el-form-item>
					<el-form-item prop="address" label="地址" :rules="[
					     {
					       required: true,
					       message: '请输入店铺地址',
					       trigger: 'blur',
					     }
					   ]">
						<el-input v-model="ruleForm.address" />
					</el-form-item>
					<el-form-item label="备注">
						<el-input v-model="ruleForm.desc" type="textarea" />
					</el-form-item>

				</el-form>

			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="outerVisible = false">取消</el-button>
					<el-button type="primary" @click="submitForm(formRef)">
						确定
					</el-button>
				</div>
			</template>
		</el-dialog>

		<el-dialog v-model="dialogVisibleImg">
			<img w-full :src="dialogImageUrl" alt="Preview Image" />
		</el-dialog>


	</div>
</template>

<script lang="ts" setup>
	import { reactive, ref, onMounted } from 'vue'
	import { GetShops, PostShopData } from '@/api/shop'
	import { ElMessage, FormInstance, UploadFile } from 'element-plus'
	const formRef = ref<FormInstance>()


	const tableData = ref([])
	const outerVisible = ref(true)
	const dialogImageUrl = ref('')
	const dialogVisible = ref(false)
	const dialogVisibleImg = ref(false)
	const ruleForm = reactive({
		name: '',
		phone: '',
		address: '',
		desc: '',
		cover_pic: 'https://uploadfile.huiyi8.com/2015/0116/20150116021013484.jpg.270.jpg',
		logo_pic: 'https://upload.logomaker.com.cn/uploadfile/2019/12/04/n6MteomZsYPX.jpg',
		id: '' // 新增的id字段，用于编辑时保存数据到数据库中对应的数据行。
	})

	onMounted(() => {
		initData()
	})

	const initData = () => {
		GetShops().then(res => {
			if (res.code == 200) {
				tableData.value = res.data
			} else {
				ElMessage.error('请求失败!')
			}
		})
	}
	const submitForm = (formEl : FormInstance | undefined) => {
		if (!formEl) return
		debugger;
		formEl.validate((valid) => {
			if (valid) {
				PostShopData(ruleForm).then(res=>{
					if(res.code == 200){
						
					}
				})
				console.log(ruleForm)
			} else {
				console.log('error submit!')
			}
		})
	}
	const handleRemove = (file : UploadFile) => {
		
		console.log(file)
	}
	const handlePictureCardPreview = (file : UploadFile) => {
		dialogImageUrl.value = file.url!
		dialogVisibleImg.value = true
	}
</script>

<style>
</style>